<template>
  <NuxtLayout name="backgroud">
    <div class="board" v-loading="loading">
      <div class="board-left">
        <NoticeCard />
        <div class="board-left_usercard">
          <UserCard />
        </div>
      </div>
      <div class="board-right">
        <ul>
          <li
            v-for="item in boardList"
            :key="item.id"
            class="board-right_list"
            >
            <div class="board-right_list--item">
              <img :src="item.avatar">
              <div>
                <h2 class="kaiti">
                  <span>{{ item.author }}</span>
                  <span>
                    <svg class="icon" aria-hidden="true">
                      <use :xlink:href="item.system"></use>
                    </svg>
                    {{ item.system.split('-')[1] }}
                  </span>
                  <span>
                    <svg class="icon" aria-hidden="true">
                      <use :xlink:href="item.browser"></use>
                    </svg>
                    {{ item.browser.split('-')[1] }}
                  </span>
                </h2>
                <p v-html="item.text"></p>
                <h3>{{ item.createTime }}·{{ item.address }} <i @click="clickComm(item)">点击评论</i> </h3>
              </div>
            </div>
            <Comment  :comment="item.child" />
          </li>
          <reply-comment ref="ReplyRef" @submitReply="submitReply" />
        </ul>
      </div>
      <div>
        <NontCard />
      </div>
    </div>
  </NuxtLayout>
</template>
<script setup lang="ts">
import { ref,onMounted,nextTick } from 'vue'
import { getBoardList,addreply,addBoard } from '../../service/api/board'
import { useNotification } from 'naive-ui'
const notification = useNotification()
const loading = ref(false)
let boardList = ref()
const ReplyRef = ref(null)
//调用useState评论人信息
const commentMsg = useComment()
//调用useState回复组件ref
const publishRef = usPublishRef()
//调用useState是否显示被回复人信息
const showReply = useShowReply()
const getBoradList = async() => {
  loading.value = true
  await nextTick()
  const params = {
    "pageNo":1,
    "pageSize":1000
  }
  try{
    const res:any = await getBoardList(params)
    const data = res.data._value.data
    boardList.value = data
    loading.value = false
  }catch(err){
    console.log(err)
  }
}
const submitReply = async (params:any,isReply:any)=>{
  try {
    let res
    if(isReply){
      res = await addreply(params)
    } else {
      res = await addBoard(params)
    }
    getBoradList()
    notification['success']({
      content: '提示',
      meta: res.data._rawValue.message,
      duration: 2500,
      keepAliveOnHover: true
    })
    nextTick(() => {
      ReplyRef.value?.resetPage()
    })
  } catch(err) {
    console.log(err)
  }
}
//点击评论
const clickComm = (item:any) => {
  commentMsg.value = item
  if(publishRef.value){
    publishRef.value.scrollIntoView({ block: "start",behavior: 'smooth' })
    showReply.value = true
  }
}
const scrollTop = useScrollTop()
watch(scrollTop,() => {
  let el = document.getElementsByClassName('board-left_usercard')
    if(scrollTop.value >= 60){
      el[0].style.position = 'fixed'
      el[0].style.top = '80px'
    } else{
      el[0].style.position = ''
    }
})
onMounted(()=>{
  getBoradList()
})
</script>
<script lang="ts">
  export default {
    layout:false
  }
</script>
<style scoped lang="scss">
.board{
  padding-top: 20px;
  width: 80%;
  margin: 0 auto;
  display: flex;
  margin-bottom: 20px;
  &-left{
    position: relative;
    &_usercard{
      transition: all 1s;
    }
  }
  &-right{
    background-color: rgba($color: #fff, $alpha: .6);
    width: 100%;
    border-radius: 6px;
    margin-left: 10px;
    padding: 20px;
    margin-right: 10px;
    &_list{
      margin-bottom: 20px;
      &--item{
        display: flex;
        align-items: flex-start;
        img{
          width: 50px;
          border-radius: 50%;
          margin-right: 5px;
        }
        h2{
          font-size: 16px;
          margin-bottom: 10px;
          span{
            margin-right: 10px;
          }
        }
        p{
          line-height: 28px;
        }
        h3{
          font-size: 12px;
          color: #999;
          line-height: 28px;
          i{
            cursor: pointer;
            color:$yun-color;
            margin-left: 50px;
          }
        }
      }
    }
  }
}
</style>